<template>
  <div class="view-drawer">
    <fx-card title="基础用法">
      <fx-radio-group v-model="direction">
        <fx-radio label="right">右边出来</fx-radio>
        <fx-radio label="left">左边出来</fx-radio>
        <fx-radio label="top">上边出来</fx-radio>
        <fx-radio label="bottom">下边出来</fx-radio>
      </fx-radio-group>
      <fx-button @click="baseVisible=true">打开</fx-button>
      <fx-drawer v-model:visible="baseVisible" title="提示" :direction="direction">
        这里是内容
      </fx-drawer>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="关闭前回调">
      <fx-button @click="beforeVisible=true">打开</fx-button>
      <fx-drawer v-model:visible="beforeVisible" title="提示" :before-close="beforeClose">
        这里是内容
      </fx-drawer>
      <template #hide>
        <pre v-highlight="before"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="嵌套">
      <fx-button @click="visibleFirst=true">打开第一层</fx-button>
      <fx-drawer v-model:visible="visibleFirst" title="第一层" width="80%" :before-close="beforeClose">
        <p>这里是第一层</p>
        <fx-button @click="visibleSecond=true">打开第二层</fx-button>
        <fx-drawer v-model:visible="visibleSecond" title="第二层" direction="left" :before-close="beforeClose">
          <p>这里是第二层</p>
        </fx-drawer>
      </fx-drawer>
      <template #hide>
        <pre v-highlight="nested"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { DrawerBeforeClose } from '@/base/drawer/drawer.vue'
import { FxConfirm, FxMessage } from '@/base'

export default defineComponent({
  name: 'viewDrawer',
  setup () {
    const baseVisible = ref<boolean>(false)
    const beforeVisible = ref<boolean>(false)
    const visibleFirst = ref<boolean>(false)
    const visibleSecond = ref<boolean>(false)
    const direction = ref<string>('right')

    const beforeClose: DrawerBeforeClose = (done): void => {
      FxConfirm('是否关闭?').then(() => {
        FxMessage.success('成功关闭!')
        done()
      }).catch(() => {
        FxMessage.warning('取消了关闭!')
      })
    }

    const base = `<fx-radio-group v-model="direction">
  <fx-radio label="right">右边出来</fx-radio>
  <fx-radio label="left">左边出来</fx-radio>
  <fx-radio label="top">上边出来</fx-radio>
  <fx-radio label="bottom">下边出来</fx-radio>
</fx-radio-group>
<fx-button @click="baseVisible=true">打开</fx-button>
<fx-drawer v-model:visible="baseVisible" title="提示" :direction="direction">
  这里是内容
</fx-drawer>`
    const before = `<fx-button @click="beforeVisible=true">打开</fx-button>
<fx-drawer v-model:visible="beforeVisible" title="提示" :before-close="beforeClose">
  这里是内容
</fx-drawer>

export default defineComponent({
    setup() {
      const beforeClose: DrawerBeforeClose = (done): void => {
        FxConfirm('是否关闭?').then(() => {
          FxMessage.success('成功关闭!')
          done()
        }).catch(() => {
          FxMessage.warning('取消了关闭!')
        })
      }
    }
})`
    const nested = `<fx-button @click="visibleFirst=true">打开第一层</fx-button>
<fx-drawer v-model:visible="visibleFirst" title="第一层" width="80%" :before-close="beforeClose">
  <p>这里是第一层</p>
  <fx-button @click="visibleSecond=true">打开第二层</fx-button>
  <fx-drawer v-model:visible="visibleSecond" title="第二层" direction="left" :before-close="beforeClose">
    <p>这里是第二层</p>
  </fx-drawer>
</fx-drawer>`

    return {
      baseVisible,
      beforeVisible,
      visibleFirst,
      visibleSecond,
      direction,
      base,
      before,
      nested,
      beforeClose
    }
  }
})
</script>

<style scoped lang="scss">
.view-drawer {
}
</style>
